<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 80%;
           
            border: 2px solid red;
            margin:  20px auto;
        }
        #user{
           width: 100%;
           margin-top: 20px;
           overflow: hidden;
        }
        #user div{
            width: 500px;
            float: left;
            display: flex;
        }
        #user input{
            float: left;
            margin: 30px 50px;
            height: 60px;
        }
        #user div img{
            width: 100px;
            height: 100px;
            margin-left: 20px;
            opacity: 0.5;
            cursor: pointer;
        }
        /*准备一个class 给当前选择的图片加上active的class  */
        #user div .active{
            opacity: 1;
            border: 1px solid red;
            box-sizing: border-box;
        }
        #msg{
            width: 90%;
            height: 150px;
            margin: 10px auto;
        }
        .list{
            overflow: auto;
        }
    
        .list_one{
            width: 90%;
            margin: 10px auto;
            height:150px;
            border: 2px solid green;
        }
        .list_one img{
           width: 100px; 
           height: 100px;
           margin-top: 20px;
           float: left;
           margin-right: 50px;
           margin-left: 20px;
          
        }
        .list_one>div{
            float: left;
            margin-right:400px;
            margin-top: 20px;
        }
        .list_one>div p:nth-child(1){
            margin-bottom: 20px;
        }
        .list_one a{
            float: left;
            margin-top: 20px;
        }
        .send{
            width: 30%;
            float: right;
            height: 80px;
            margin-top: 20px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .send button{
            color: white;
            background: green;
            margin-left: 30px;
        }
        #add{
            width: 100px;
            height: 40px;
        }
    </style>

</head>
<body>
    <div id="wrap">
        <h1>2107班留言板</h1>
        <div id="user">
            <input type="text" placeholder="昵称" id="nick">
            <div class="img_wrap">
                <img class="active" src="./img/01.jpg" alt="">
                <img src="./img/02.jpg" alt="">
                <img  src="./img/03.jpg" alt="">
                <img  src="./img/04.png" alt="">
                <img src="./img/05.png" alt="">
                <img src="./img/06.png" alt="">
                <img src="./img/07.jpg" alt="">
            </div>
        </div>
        <div style="height:150px; margin-bottom: 60px;">
            <textarea  placeholder="输入留言内容" id="msg"></textarea>
            <div class="send">
                <div> 还能输入 <span id="count">0</span>个字  <button id="add">广播</button></div>
            </div>
        </div>
        <!-- 留言列表部分 -->
        <h1>大家都在说：</h1>
        <div class="list">
            <!-- 每个留言的布局   -->
            <!-- <div class="list_one">
                <img src="./img/01.jpg" alt="">
                <div>
                    <p>
                        <span>用户名 </span> <span>内容</span>
                    </p>
                    <p>留言时间</p>
                </div>
                <a href="#">删除</a>
            </div> -->
        </div>

    </div>
    


    <script>
          var msg=document.querySelector("#msg");//留言内容输入框
          var count=document.querySelector("#count");
            // 输入字数提示
            // 给输入框绑定键盘按下事件
            var num=0;//可输入的字数
            msg.onkeypress=function(){
                // 可输入的字数=100-已输入的字数
                num=50-this.value.length;
                if(num<=0){//当输入超过50
                    num=0;
                    this.value=this.value.substr(0,50);
                }
                count.innerHTML=num;
            }


            // 图片点击切换效果-------------------------------------------------
           
            var imgs=document.querySelectorAll(".img_wrap img");
             // 取出所有图片 绑定点击事件
            for(var i=0;i<imgs.length;i++){ 
                imgs[i].onclick=function(){
                    // 其他图片移除active的class
                    for(var j=0;j<imgs.length;j++){
                        imgs[j].classList.remove("active")
                    }
                    // 当前点击的图片 加上active的class 
                    this.classList.add("active");
                }
            }         

            if(!localStorage.msgList){ //如果没有初始化的数组
                localStorage.msgList="[]" //设置一个空数组
            }
        // 添加功能--------------------------------------------------------
            // 点击添加按钮
            var add=document.querySelector("#add");
            var nick=document.querySelector("#nick");//昵称输入框
          
            // 添加留言
            add.onclick=function(){
                // 获取头像地址  被选择的头像的地址
                var acimg=document.querySelector(".active"); //获取当前选择的头像
                var imgsrc=acimg.getAttribute("src");//获取头像地址
                    // 整理好数据要添加到localStorage的数据
                    var  obj={
                            id:new Date().getTime(), //时间戳作为id
                            nick:nick.value, //昵称
                            msg:msg.value, //留言内容
                            img:imgsrc,//头像地址
                            date:new Date().toLocaleString()//当前时间作为留言时间
                    }
                // 添加到localStorage 准备好的数组
                // 1.取出localStorage中的数组 
                var arr=JSON.parse(localStorage.msgList);
                 // 2.把准备好的数据添加进去
                 arr.push(obj)
                // 3.将添加后的数组 设置回localStorage
                localStorage.msgList=JSON.stringify(arr)
                // 添加后 清空输入框
                nick.value=""
                msg.value=""
                // 添加完留言  重新渲染
                loadList()
            }

            // 渲染列表方法---------------------------------------------------
            var list=document.querySelector(".list");
            function loadList(){
                // 取出localStorage的数据  
                var arr=JSON.parse(localStorage.msgList)
                // 循环生成留言列表
                var str=``
                for(var i=0;i<arr.length;i++){
                    str+=`<div class="list_one">
                    <img src="${arr[i].img}" alt="">
                    <div>
                        <p>
                            <span>${arr[i].nick} </span>&nbsp;&nbsp;&nbsp;<span>${arr[i].msg}</span>
                        </p>
                        <p>${arr[i].date}</p>
                    </div>
                    <a href="#" onclick="del(${arr[i].id})">删除</a>
                </div>`;
                }
                list.innerHTML=str;

            }
             
            loadList()
            // 删除 --------------------------------------------------------------
            // 通过id 查找到localStorage中的数据  并删除  删除后从新localStorage

            function del(id){
                console.log(id);
                //1. 取出localStorage的数据
                var arr=JSON.parse(localStorage.msgList);
                // 循环localStorage的数据去找到要删除的数据
                arr.forEach(function(item,index){
                    // item 数组每一项   index--下标
                    if(id==item.id){//当前要删除的id 等于localStorage中的某条数据的id
                        // 删除本条数据
                        // index---要删除的下标
                        arr.splice(index,1)//删除了
                    }
                })
                // 删除后 把数据从新设置回localStorage
                localStorage.msgList=JSON.stringify(arr)
                // 每次删除后 从新调用渲染列表方法
                loadList()
            }
            
    </script>
</body>
</html>